<template>
	<view class="repair-page">
		<!-- 维修记录列表 -->
		<view class="repair-list">
			<view class="repair-item" v-for="(item, index) in repairList" :key="index" @click="goToRepairDetail(item)">
				<view class="repair-header">
					<text class="repair-title">{{ item.title }}</text>
					<text class="status-tag" :class="item.status === '审核中' ? 'status-pending' : 'status-processing'">
						{{ item.status }}
					</text>
				</view>

				<view class="repair-info">
					<view class="info-row">
						<text class="label">报修房屋</text>
						<text class="value">{{ item.address }}</text>
					</view>
					<view class="info-row">
						<text class="label">报修项目</text>
						<text class="value">{{ item.project }}</text>
					</view>
					<view class="info-row">
						<text class="label">预约日期</text>
						<text class="value">{{ item.date }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 申请维修按钮 -->
		<view class="submit-btn">
			<button type="primary" @click="onApplyRepair">
				<text class="plus-icon">+</text>
				申请维修
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				repairList: []
			}
		},
		onShow() {
			this.getRepairList()
		},
		methods: {
			/**
			 * 获取维修记录列表
			 * 从服务器获取维修记录数据，并进行状态和项目的映射转换
			 * @returns {Promise<void>}
			 */
			async getRepairList() {
				try {
					// 从本地存储获取手机号
					const phoneNumber = uni.getStorageSync('phoneNumber') || '';
					const response = await uni.request({
						url: 'http://localhost:8500/repair/queryMaintenanceInfo',
						method: 'GET',
						data: {
							phone: phoneNumber
						},
						header: {
							'Content-Type': 'application/json'
						}
					});

					if (response.data.code === 200) {
						// 修改状态映射，与 Detail.vue 保持一致
						const statusMap = {
							'0': '审核中',
							'1': '处理中',
							'2': '已完成',
						};

						// 添加维修项目映射
						const projectMap = {
							'1': '空调制冷效果差',
							'2': '厨房瓷砖脱落',
							'3': '卧室门把手松动',
							'4': '客厅插座没电',
							'5': '阳台排水管堵塞',
							'6': '洗手盆下水慢',
							'7': '厕所马桶水箱漏水',
							'8': '客厅灯具闪烁',
							'9': '厨房煤气管漏气',
							'10': '卧室窗户关不严',
							'11': '电视机信号不好',
							'12': '冰箱制冷不足',
							'13': '洗衣机排水异常',
							'14': '浴室镜子开裂',
							'15': '客厅墙面发霉',
							'16': '厨房台面划痕',
							'17': '卫生间地漏返味',
							'18': '阳台晾衣架松动',
							'19': '入户门防盗锁故障',
							'20': '客厅地板起翘'
						};

						this.repairList = response.data.data.map(item => ({
							id: item.id,
							title: item.title,
							status: statusMap[item.status] || '审核中',
							address: item.address,
							project: projectMap[item.repairId] || item.repairId,
							date: this.formatDate(item.appointmentDate),
							description: item.description,
							phone: item.phone,
							images: item.images
						}));
					}
				} catch (error) {
					console.error('获取维修列表失败:', error);
					uni.showToast({
						title: '获取维修列表失败',
						icon: 'none'
					});
				}
			},
			/**
			 * 申请维修按钮点击处理
			 * 导航到维修申请页面
			 */
			onApplyRepair() {
				// 跳转到申请维修页面
				uni.navigateTo({
					url: '/pages/repair/apply/apply'
				})
			},
			/**
			 * 格式化日期字符串
			 * 将日期字符串转换为 YYYY-MM-DD 格式
			 * @param {string} dateStr - 需要格式化的日期字符串
			 * @returns {string} 格式化后的日期字符串
			 */
			formatDate(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			/**
			 * 跳转到维修详情页面
			 * @param {Object} item - 维修记录项目数据
			 */
			goToRepairDetail(item) {
				const repairInfo = encodeURIComponent(JSON.stringify({
					id: item.id,
					address: item.address,
					project: item.project,
					title: item.title,
					date: item.date,
					status: item.status,
					description: item.description,
					phone: item.phone,
					images: item.images
				}));

				uni.navigateTo({
					url: `/pages/repair/detail/Detail?repairInfo=${repairInfo}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.repair-page {
		min-height: 100vh;
		background: #f5f5f5;
		padding: 20rpx;
	}

	.repair-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;

		&:active {
			opacity: 0.8;
		}
	}

	.repair-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.repair-title {
		font-size: 32rpx;
		color: #333;
		font-weight: normal;
	}

	.status-tag {
		font-size: 24rpx;
		padding: 4rpx 20rpx;
		border-radius: 4rpx;
	}

	.status-pending {
		background: #e8f5e9;
		color: #4caf50;
	}

	.status-processing {
		background: #ffebee;
		color: #f44336;
	}

	.repair-info {
		.info-row {
			display: flex;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			line-height: 1.5;

			&:last-child {
				margin-bottom: 0;
			}

			.label {
				color: #999;
				width: 140rpx;
			}

			.value {
				color: #333;
				flex: 1;
			}
		}
	}

	.submit-btn {
		position: fixed;
		bottom: 40rpx;
		left: 20rpx;
		right: 20rpx;

		button {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 8rpx;
			font-size: 32rpx;
			background: #0066ff;

			.plus-icon {
				margin-right: 8rpx;
			}
		}
	}
</style>